<template>
  <div>
    <el-row justify="space-between" type="flex">
      <el-col :span="10">
        <el-button size="small" @click="handleClickButton('DeleteData')">
          删除行为类型
        </el-button>
        <el-button size="small" @click="handleClickButton('ActivityEnable')">
          启用行为类型
        </el-button>
        <el-button
          size="small"
          style="margin-left: 0;"
          @click="handleClickButton('ActivityDisable')"
        >
          禁用行为类型
        </el-button>
      </el-col>
      <el-col :span="3">
        <el-button
          size="small"
          style="width: 100%"
          @click="$refs.NewDeed.show()"
        >
          创建新行为类型
        </el-button>
      </el-col>
    </el-row>
    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <el-table-column label="选择" width="60">
        <template slot-scope="scope">
          <el-radio
            v-model="tableSelect"
            :label="scope.row.activity_id"
            style="margin-left: 10px;"
            @change="getTemplateRow(scope.row.activity_id)"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="行为类型ID" prop="activity_id" />
      <el-table-column label="监控器类型ID" prop="monitor_id" />
      <el-table-column label="动作类型ID" prop="action_id" />
      <el-table-column label="类" prop="activity_class" />
      <el-table-column label="作用域" prop="apply_on" />
      <el-table-column label="行为类型名" prop="activity_name" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div
            :class="['status', scope.row.is_disable ? 'fail' : 'success']"
          ></div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="f12"
            type="text"
            @click="handleClickDesc(scope.row.activity_id)"
          >
            查看细节
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="" prop="" />
    </el-table>
    <div class="mt10 el-row--flex is-justify-end">
      <el-pagination
        background
        :current-page="page"
        layout="total, prev, pager, next"
        :page-size="limit"
        :page-sizes="[100, 200, 300, 400]"
        small
        :total="count"
        @current-change="handleCurrentChangePage"
      />
    </div>

    <el-form label-position="top" size="mini">
      <el-form-item label="EULA:">
        <json-viewer
          boxed
          copyable
          :expand-depth="5"
          expanded
          preview-mode
          sort
          :value="jsonData"
        />
      </el-form-item>
    </el-form>

    <new-deed ref="NewDeed" @change="loadingList" />
  </div>
</template>

<script>
import checkSelectTable from "@/utils/mixin/checkSelectTable";

import JsonViewer from "vue-json-viewer";
import NewDeed from "@/views/visibility/toast/newDeed";
import activity from "@/api/recognize/activity";
import radioTable from "@/utils/mixin/radioTable";
export default {
  name: "Deed",
  components: { NewDeed, JsonViewer },
  mixins: [radioTable, checkSelectTable],
  data: () => {
    return {
      tableData: [],
      limit: 5,
      page: 1,
      count: 0,
      jsonData: {}
    };
  },
  mounted() {
    this.loadingList();
  },
  methods: {
    handleActivityDisable({ activity_id }) {
      activity
        .disable({
          activity_id
        })
        .then(res => {
          this.$message.success(res.data.message);
          this.loadingList();
        });
    },
    handleActivityEnable({ activity_id }) {
      activity
        .enable({
          activity_id
        })
        .then(res => {
          this.$message.success(res.data.message);
          this.loadingList();
        });
    },
    handleDeleteData({ activity_id }) {
      activity
        ._delete({
          activity_id
        })
        .then(res => {
          this.$message.success(res.data.message);
          this.loadingList();
        });
    },
    handleClickButton(module) {
      let data = {};
      this.is_check_table("activity_id") &&
        (data = this.is_get_select_data()) &&
        this[`handle${module}`](data);
    },
    handleClickDesc(id) {
      activity
        .detail({
          activity_id: id
        })
        .then(res => {
          this.jsonData = res.data.pattern;
        });
    },
    loadingList() {
      activity
        .list({
          limit: this.limit,
          page: this.page
        })
        .then(res => {
          this.count = res.data.count;
          this.tableData = res.data.activity_list;
        });
    },
    handleCurrentChangePage(val) {
      this.page = val;
      this.loadingList();
    }
  }
};
</script>

<style lang="scss" scoped>
.status {
  width: 15px;
  height: 15px;
  border-radius: 100px;
}
.success {
  background-color: $--color-success;
}
.fail {
  background-color: $--color-danger;
}
</style>
